/**
 * Created by zhouaqian on 2017/4/18.
 */
var React = require('react');

var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var GoodSwiper = require('../widget/GoodSwiper');
var ajax = require('../tools/ajax');
var IncreaseId = require('../../web/tools/IncreaseId');
var MsgBox = require('../components/MsgBox');
var AttrContent = require('../widget/AttrContent');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            pointPro:[],
            jifen:0
        }
    },
    myScroll:"",

    componentDidMount: function () {
        var goods_id = localStorage.getItem("goods_id");
        this.getPointPro(goods_id);
        this.getUserInfoByUid();
        setTimeout(this.iscroll,500);
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#pointGoodDetailWrapper",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
    },

    /**获取新品商品详情信息 */
    getPointPro(goods_id){
        var p = this;
        ajax("POST","getPointPro",{goods_id:goods_id},function(dt){
            if(dt && dt.success){
                var objs = dt.data[0];
                p.setState({pointPro : objs});
            }
        });
    },
    /**获取积分*/
    getUserInfoByUid(){
        var p =this;
        var userId = localStorage.getItem("userId");
        ajax("POST","getUserInfoByUid",{userId:userId},function(dt){
            if(dt&&dt.success){
                var obj =dt.data[0];
                p.setState({jifen:obj.jifen});
                console.log(obj.jifen);
            }
        })
    },
    /**弹出选项框*/
    AttrContent(e){
        var p=this;
        var goods_id = e.currentTarget.getAttribute('data-id');
        console.log(goods_id);
        if(goods_id){
            p.refs.attrContent.setState({
                flag:p.state.flag
            },()=>{
                p.refs.attrContent.getProinfoById(goods_id);
            });
            p.setState({goods_id:goods_id});
            var flag = p.state.flag;
            if(flag == false){
                p.setState({flag:true})
            }
        }
    },
    MsgBox(){
        this.refs.MsgBox.setState({
            type: "no",
            timeout:1000,
            show:true,
            word:"积分不足"
        })
    },
    render: function () {
        var p = this;
        var pointPro = p.state.pointPro;
        if(pointPro.goods_img){
            var goods_img = pointPro.goods_img.split(",");
        }
        if(pointPro.original_img){
            var i=-1;
            var imgList = pointPro.original_img.split(",").map(function (obj) {
                i++;
                return (
                    <img key={i} src={obj}/>
                )
            });
        }
        return (
            <div className="main"  id="main">
                <Bheader title="商品详情" hact="#integralMall" headr="false"></Bheader>
                <div id="pointGoodDetailWrapper" className="container-t wrap">
                    <div  style={{minHeight:"28.66rem"}} className="goods_detail">
                        <div className="goods_con">
                            <GoodSwiper ref="goodSwiper" goods_img={goods_img}></GoodSwiper>
                            <p className="goods_name" ref="goodname">
                                {pointPro.goods_name}
                            </p>
                            <p className="goods_price">
                                &yen;<span className="price">{pointPro.point_price}</span>+
                                <span className="price">{pointPro.point}</span>积分
                            </p>
                            <hr className="orderHr"></hr>
                            <div className="goods_info newGoodsInfo">
                                <p className="title">商品信息:</p>
                                <ul>
                                    <li className="left">
                                        品牌：<span className="infoBold">{pointPro.brand_name}</span>
                                    </li>
                                    <li className="right">
                                        规格：<span className="infoBold">{pointPro.goods_guige}</span>
                                    </li>
                                    <li className="left">
                                        产地：<span className="infoBold">{pointPro.gc_name}</span>
                                    </li>
                                    <li className="right">
                                        库存：<span className="infoBold">{pointPro.goods_number}</span>
                                    </li>
                                </ul>
                            </div>
                            <div className="pro-detail">
                                <p className="title">详情:</p>
                                {imgList}
                            </div>
                        </div>
                    </div>
                    <AttrContent ref="attrContent" model="1" jifen={p.state.jifen} MsgBox={p.MsgBox} fleshNum={p.fleshNum}></AttrContent>
                </div>
                <div className="goods_btn newBtn" onClick={p.AttrContent} data-id={pointPro.id}>
                    <div className="goods_addcart">
                        立即兑换
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
            </div>
        )
    }
});